<script>
import { computed, onMounted, ref, watch } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { TabPaneName } from 'element-plus'
import userView from '../components/userView.vue';

// 自定义防抖函数
function debounce(func, wait) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}
export default {
    components: {
        userView
    },
    setup() {
        const store = useStore();
        const router = useRouter()
        const selectedTab = ref('1');
        //tabs
        let tabIndex = 2
        const editableTabsValue = ref('1')
        const editableTabs = ref([
            {
                title: '首页',
                name: '1',
                closable: false,
            }

        ])



        const handleTabsEdit = (targetName, action) => {
            if (action === 'remove' && targetName !== '1') {
                const tabs = editableTabs.value;
                let activeName = editableTabsValue.value;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            const nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            } else {
                                // 如果没有下一个或前一个标签页，选择首页
                                activeName = '1';
                            }
                        }
                    });
                }
                editableTabsValue.value = activeName;
                editableTabs.value = tabs.filter(tab => tab.name !== targetName);
            }
        };




        let OutLogin = () => {
            console.log("退出登录");
            store.commit("outLogin")
        };

        const beforeRouteLeave = (to, from, next) => {
            let isLogin = computed(() => store.state.isLogin)
            if (isLogin.value) {
                next(false); // 阻止离开登录页面
            } else {
                next();
            }
        };


        const menuItems = [
            {
                index: "1",
                title: "首页",
            },
            {
                index: "2-1",
                title: "用户管理",
            },
            {
                index: "2-2",
                title: "选项 2",
            },
            {
                index: "2-3",
                title: "选项 3",
            },
            {
                index: "2-4-1",
                title: "选项 4-1",
            },
            {
                index: "3-1",
                title: "选项 3-1",
            },
            {
                index: "3-2",
                title: "选项 3-2",
            },
            {
                index: "3-3",
                title: "选项 3-3",
            },
            {
                index: "3-4-1",
                title: "选项 3-4-1",
            },

        ];

        const handleSelect = (index) => {
            selectedTab.value = index;

            // 查找菜单项
            const menuItem = menuItems.find(item => item.index === index);
            console.log("查找===>", selectedTab.value);

            // 检查是否已存在对应索引的标签页
            const existingTab = editableTabs.value.find(tab => tab.name === index);
            if (!existingTab && menuItem) {
                const newTabName = index;
                editableTabs.value.push({
                    title: menuItem.title,
                    name: newTabName,
                    closable: true
                });
            }

            editableTabsValue.value = index;

        };
        // 需要防抖的函数
        const removeNewTabElement = () => {
            const tabsEl = document.querySelector('.el-tabs__new-tab');
            if (tabsEl) {
                tabsEl.remove();
            }
        };

        // 使用防抖函数
        const debouncedRemoveNewTabElement = debounce(removeNewTabElement, 300);

        onMounted(() => {
            debouncedRemoveNewTabElement();
        })


        return {
            OutLogin,
            beforeRouteLeave,
            handleSelect,
            selectedTab,

            tabIndex,
            editableTabs,
            editableTabsValue,
            handleTabsEdit



        }
    }
}
</script>

<template>
    <el-container class="layout-container-demo">
        <el-aside width="200px">
            <el-scrollbar>
                <el-aside width="200px" class="icon">LOGO</el-aside>

                <el-menu :default-openeds="['1', '3']" @select="handleSelect">

                    <el-menu-item index="1">
                        <el-icon>
                            <House />
                        </el-icon>
                        <span>首页</span>
                    </el-menu-item>

                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <VideoCameraFilled />
                            </el-icon>系统管理
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1">用户管理</el-menu-item>
                            <el-menu-item index="2-2">选项 2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="2-3">选项 3</el-menu-item>
                        </el-menu-item-group>
                        <el-sub-menu index="2-4">
                            <template #title>选项4</template>
                            <el-menu-item index="2-4-1">选项 4-1</el-menu-item>
                        </el-sub-menu>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon>
                                <Setting />
                            </el-icon>菜单2
                        </template>
                        <el-menu-item-group>
                            <template #title>分组 1</template>
                            <el-menu-item index="3-1">选项 1</el-menu-item>
                            <el-menu-item index="3-2">选项 2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="Group 3">
                            <el-menu-item index="3-3">选项 3</el-menu-item>
                        </el-menu-item-group>
                        <el-sub-menu index="3-4">
                            <template #title>选项 4</template>
                            <el-menu-item index="3-4-1">选项 4-1</el-menu-item>
                        </el-sub-menu>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon>
                                <setting />
                            </el-icon>菜单3
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="4-1">选项 1</el-menu-item>
                            <el-menu-item index="4-2">选项 2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="4-3">选项 3</el-menu-item>
                        </el-menu-item-group>
                        <el-sub-menu index="4-4">
                            <template #title>选项 4</template>
                            <el-menu-item index="4-4-1">选项 4-1</el-menu-item>
                        </el-sub-menu>
                    </el-sub-menu>
                    <el-sub-menu index="5">
                        <template #title>
                            <el-icon>
                                <setting />
                            </el-icon>菜单4
                        </template>
                        <el-menu-item-group>
                            <template #title>Group 1</template>
                            <el-menu-item index="5-1">选项 1</el-menu-item>
                            <el-menu-item index="5-2">选项 2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="Group 5">
                            <el-menu-item index="5-3">选项 3</el-menu-item>
                        </el-menu-item-group>
                        <el-sub-menu index="5-4">
                            <template #title>选项 4</template>
                            <el-menu-item index="5-4-1">选项 4-1</el-menu-item>
                        </el-sub-menu>
                    </el-sub-menu>
                    <el-sub-menu index="6">
                        <template #title>
                            <el-icon>
                                <setting />
                            </el-icon>菜单5
                        </template>
                        <el-menu-item-group>
                            <template #title>分组 1</template>
                            <el-menu-item index="6-1">选项 1</el-menu-item>
                            <el-menu-item index="6-2">选项 2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="Group 6">
                            <el-menu-item index="6-3">选项 3</el-menu-item>
                        </el-menu-item-group>
                        <el-sub-menu index="6-4">
                            <template #title>选项 4</template>
                            <el-menu-item index="6-4-1">选项 4-1</el-menu-item>
                        </el-sub-menu>
                    </el-sub-menu>
                    <el-sub-menu index="7">
                        <template #title>
                            <el-icon>
                                <setting />
                            </el-icon>菜单6
                        </template>
                        <el-menu-item-group>
                            <template #title>分组 1</template>
                            <el-menu-item index="7-1">选项 1</el-menu-item>
                            <el-menu-item index="7-2">选项 2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="Group 7">
                            <el-menu-item index="7-3">选项 3</el-menu-item>
                        </el-menu-item-group>
                        <el-sub-menu index="7-4">
                            <template #title>选项 4</template>
                            <el-menu-item index="7-4-1">选项 4-1</el-menu-item>
                        </el-sub-menu>
                    </el-sub-menu>
                </el-menu>
            </el-scrollbar>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <div class="toolbar">
                    <el-dropdown>
                        <el-icon style="margin-right: 8px; margin-top: 1px">
                            <Setting />
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>View</el-dropdown-item>
                                <el-dropdown-item>Add</el-dropdown-item>
                                <el-dropdown-item @click="OutLogin">OutLogin</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <span>Tom</span>
                </div>
            </el-header>



            <el-main>
                <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" @edit="handleTabsEdit">
                    <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name"
                        :closable="item.closable">
                        <template v-if="item.name === '1'">
                            <el-scrollbar>
                                <user-view />
                            </el-scrollbar>
                        </template>
                        <template v-else>
                            {{ item.name }}
                        </template>
                    </el-tab-pane>
                </el-tabs>

            </el-main>
        </el-container>
    </el-container>
</template>



<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}

.icon {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.shouye {
    width: 200px;
    height: 56px;
    background-color: #c6e2ff;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>